<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <title>Web Starter Kit</title>

    <!-- Add to homescreen -->
    <link rel="manifest" href="manifest.json">

    <!-- Fallback to homescreen for Chrome <39 on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Web Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <meta name="theme-color" content="#3372DF">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- Page styles -->
    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/main.css">
    <script>
        var docHeight = document.documentElement.clientHeight,
            docWidth = document.documentElement.clientWidth,
            html = document.getElementsByTagName("html")[0];
        var rate = docWidth / 320;

        html.style.fontSize = 100 * rate + "px";
    </script>
</head>
<body>
<nav>
    <div class="navbar">
        <div class="navbar-inner">
            <i id="a2" class="back fa fa-angle-left"></i>

            <div class="title">话题</div>
            <i id="sideMenu" class="menu fa fa-bars"></i>
        </div>
    </div>
</nav>
<div id="wrapper">
    <div class="view">
        <div class="qmh-header">
            <div class="logo"><img src="images/demo/003.png" alt="#"/></div>
            <div class="desc">
                <div class="name">巴塞罗娜球迷会</div>
                <p>
                    <span>球迷：</span>
                    <span class="num">52</span>
                    <span style="margin-left: .1rem;">总贴数：</span>
                    <span class="num">5214564</span>
                </p>

                <div class="badge">金鞋认证</div>
            </div>
        </div>
        <div class="filters filters-block">
            <div class="filter">
                <select>
                    <option>最新</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <i class="fa fa-sort-desc"></i>
            </div>
            <div class="filter">
                <select>
                    <option>分类</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <i class="fa fa-sort-desc"></i>
            </div>
        </div>
        <div id="waterfall" class="waterfall">
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-1.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-2.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-3.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-4.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-5.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<div class="image">-->
            <!--<img src="images/demo/waterfall-6.png" alt=""/>-->
            <!--</div>-->
            <!--<p class="title">小贝十大经典进球</p>-->
            <!--</div>-->
        </div>
        <div id="loading">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="toolbar">
    <a href="#" class="item active square"><i class="fa fa-home" style="margin-right: 4px;"></i>广场</a>

    <div class="item search"><i class="fa fa-search"></i></div>
    <a href="#" class="item person"><i class="fa fa-user" style="margin-right: 4px;"></i>个人</a>
</div>

<!-- Side Bar -->
<div id="sideBar" class="side-bar">
    <ul>
        <li class="topic item">话题</li>
        <li class="fans item">粉丝</li>
        <li class="news item">新闻</li>
        <li class="video item">视频</li>
        <li class="pic item">图片</li>
        <li class="infos item">资料</li>
    </ul>
</div>

<!-- modal Panel -->
<div id="overwriteMark"></div>

<div id="test" style="position: fixed;z-index: 100000;left: 0;top: 0;width: 360px;background-color: #fff;"></div>

<script src="components/zepto/zepto.js"></script>
<script src="components/fastclick/lib/fastclick.js"></script>
<script src="components/hammerjs/hammer.js"></script>
<script src="components/masonry/dist/masonry.pkgd.min.js"></script>
<!--<script src="iscroll.js"></script>-->
<script src="iscroll-probe.js"></script>
<script>
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var myScroll;

    function loaded () {
        myScroll = new IScroll('#wrapper', {
            probeType: 3,
            mouseWheel: true
        });
    }

    Zepto(function ($) {
        loaded();

        FastClick.attach(document.body);

        // tab事件
        $(".tab-block-btn-group .btn").each(function () {
            var me = $(this);
            me.on("click", function () {
                if (!me.hasClass("active")) {
                    me.siblings(".active").removeClass("active");
                    me.addClass("active");

                    $("[data-tab-index]").hide();
                    $("[data-tab-index='" + me.attr("data-tab-target") + "']").show();
                }
            });
        });

        // load more事件
        $(".load-more-block").on("click", function () {

        });

        var overwriteMark = $("#overwriteMark"),
            sideBar = $("#sideBar");
        $("#sideMenu").on("click", function () {
            $(overwriteMark).toggleClass("show");
            $(sideBar).toggleClass("show");
            $("body").toggleClass("overflow-hidden");
        });


        var waterfall = document.querySelector('#waterfall'),
            loading = $("#loading");

        var msnry = new Masonry(waterfall, {
            itemSelector: '.item',
            gutter: parseInt($("html").css("fontSize").replace("px", "")) * 0.18
        });

        var tpl = '<div class="item">' +
            '<div class="image">' +
            '<img src="{imgSrc}" alt=""/>' +
            '</div>' +
            '<p class="title">小贝十大经典进球</p>' +
            '</div>';

        var WATER_STAT = {
            page: 0,
            isLoading: false,
            end: false
        }

        function getNextPage() {
            if (!WATER_STAT.end && !WATER_STAT.isLoading) {
                WATER_STAT.isLoading = true;
                loading.show();

                $.ajaxJSONP({
                    url: 'http://192.168.23.1:8080/qmh-pic?page=' + (++WATER_STAT.page) + '&callback=?',
                    success: function (data) {
                        WATER_STAT.isLoading = false;
                        loading.hide();

                        for (var i = 0; i < data.length; i++) {
                            var d = $(tpl.replace("{imgSrc}", data[i].src)),
                                rw = parseInt($("html").css("fontSize").replace("px", "")) * 1.43; // .item width 1.52rem

                            var wh = data[i].src.match(/(\d+)-(\d+)\./),
                                w = wh[1]
                            h = wh[2],
                                rh = rw * h / w;
                            d.find("img").css({
                                height: rh
                            });
                            waterfall.appendChild(d[0]);
                            msnry.appended(d[0])
                        }
                        msnry.layout();
                        myScroll.refresh();
                    },
                    error: function () {
                        console.log("加载不了");
                    }
                });
            }
        }

        getNextPage();

        myScroll.on("scroll", function () {
            console.log("fwefew");
            if ((myScroll.maxScrollY + 200) > myScroll.y) {
                getNextPage();
            }
        });
    });
</script>
</body>
</html>
